<template id="integral">
    <div class="integral_mm">
        <div class="integral_top">
            <h3>评价</h3>
            <img src="../image/blue_da.png" alt="" @click="getIntegral()">
        </div>
        <div class="integral_1">
           <div class="integral_k" style="margin-bottom:0.2rem;">
                 <p class="integral_1_p"></p>
                 <p class="integral_p">配送服务</p>
                 <p class="integral_2">
                   <i v-bind:class="i === 1 ? 'icon iconfont icon-cstart-copy-copy red' : ' icon iconfont icon-cstart-copy-copy ccc' "  v-for="(i,index) in data.arr_1"  @click="down(index,1)"></i>
                  <!-- <i class="icon iconfont icon-cstart-copy-copy"></i>
                   <i class="icon iconfont icon-cstart-copy-copy"></i>
                   <i class="icon iconfont icon-cstart-copy-copy"></i>
                   <i class="icon iconfont icon-cstart-copy-copy"></i>-->
               </p>
                 <p class="integral_xian"></p>
           </div>
            <div class="integral_k">
                <p class="integral_1_p"></p>
                <p class="integral_p">商品质量</p>
                <p class="integral_2">
                    <i v-bind:class="i === 1 ? 'icon iconfont icon-cstart-copy-copy red' : ' icon iconfont icon-cstart-copy-copy ccc' "  v-for="(i,index) in data.arr_2"  @click="down(index,2)" ></i>
                   <!-- <i class="icon iconfont icon-cstart-copy-copy"></i>
                    <i class="icon iconfont icon-cstart-copy-copy"></i>
                    <i class="icon iconfont icon-cstart-copy-copy"></i>
                    <i class="icon iconfont icon-cstart-copy-copy"></i>-->
                </p>
            </div>
        </div>
        <div class="wan_q">
        <div class="integral_4" v-for="(goods,index) in data.goods_list">
            <p class="integral_4_p">{{goods.goods_name}}</p>
            <span class="integral_4_span"  style='border:0.01rem solid #c3c3c3;' @click="get_like(goods.goods_id,1)" >
                <i class="icon iconfont  icon-dianzan11-copy "  :class=" act[goods.goods_id] == 1 ? 'km_one':'km_two' " style="font-size:25px;"></i>
            </span>

            <span class="integral_4_span1 " @click="get_like(goods.goods_id,2)" style='border:0.01rem solid #c3c3c3;'>
                  <i style='font-size:22px' class="icon iconfont  icon-dianzan "  :class=" act[goods.goods_id] == 2 ? 'km_one':'km_two' "></i>
            </span>

        </div>
       <!-- <div class="integral_4">
            <p class="integral_4_p">金艳猕猴桃</p>
            <span class="integral_4_span" ><i class="icon iconfont  icon-dianzan11-copy"></i></span>
            <span class="integral_4_span1" ><i class="icon iconfont  icon-dianzan"></i></span>
        </div>-->
        </div>
        <div class="idea_text">
            <div class="idea_center">
                <textarea name="" id="comment_ti" cols="30" rows="10" class="idea_t" placeholder="请写下你的建议或意见">

                </textarea>
                <!--<span>{{remnant}}/<time>100</time></span>-->
            </div>
        </div>
        <!--上传图片-->
        <ul class="Release_4_5 showimg_1" id="item_img">
            <li v-for="(img,index) in item_img">
                <img v-bind:src="img" alt="" >
                <img src="../image/del_g.png"   @click="get_del(index)" alt="">
            </li>

            <li>
                <img   src="../image/input.png" alt="">
                <input type="file" class="files"  @change="getFile($event)">
                <input type="hidden" v-model="source" >
            </li>
       <p class="img_p" style="display:none">发照片可领三块钱红包哦</p>
        </ul>
        <div class="idea_ti" @click="comment_ti()">提交</div>
    </div>
</template>
<script>
    export default {
        name:'integral',
        data() {
            return {
				info:'',
				mode:'get_orders',
				order_id:this.$route.query.order_id,
				one:0,
				two:0,
				three:0,
				goods_items:[],
				source:'comment',
				shop:true,
				content:'',
				is_check:false,
                remnant:200,
                desc:'',
                /*点赞好评还是差评的字段*/
                 gmm:'',
                gmm1:'',
                type:'',
                kkl:'',
                kkp:'',
                /*上传图片字段*/
                item_img:[],
                /*删除id*/
                del_id:'',
                data:[],
                like:[],
                act:[],

            }
        },
	    mounted:function(){
		      
              console.log();
        
            this.get_order_api();
		
            //初始化页面的容器
            let h=$(window).height();
            $('.integral_mm').height(h);
			
        },
        methods:{
            get_order_api(){

                let info  = [];
                info['c'] = 'Comment';
                info['m'] = 'get_orders';
                info['order_id'] = this.order_id;

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                let Data = this.GLOBAL.dataParam(info);

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                       this.data        = temp.data;
                       this.one         = temp.data.deliver_rank;
                       this.two         = temp.data.goods_rank;    
                       this.act         = temp.data.ext;
                       this.item_img    = temp.data.shopimg;
                       $("#comment_ti").val(temp.data.content)
                        this.$router.push('/center')

                    }else{
                       this.GLOBAL.center_error(this,temp);        
                    }  
                })   
            },
            get_like:function(id,index){
                this.act[id] = index;  
            },
	        /*点赞好评还是差评*/

	        /*字段判断*/
           /* descInput(){
                var txtVal = this.desc.length;
                this.remnant = 200 - txtVal;
            },*/
		 /*	alocked: function (is_check) {
				this.is_check = !is_check;
			},*/
		/*点击删除上传的图片00*/
            get_del:function(index){
                this.item_img.splice(index, 1);
                return;
                this.del_id = index;
                this.model_show_1=true;
                this.bg_backgrond=true;
            },
            /*提交评价*/
            comment_ti(){
                let content = $("#comment_ti").val();
                if(!content){
                    alert("评论不能为空！")
                }

                let data = [];

                data['c']        = 'Comment';
                data['m']        = 'orders_comment';
                data['order_id'] = this.order_id;
                data['deliver']  = this.one;
                data['goods']    = this.two;
                data['content']  = content;
                data['ext']      = JSON.stringify(this.act);
                data['shopimg']  = JSON.stringify(this.item_img);

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/index.php';
                let Data = this.GLOBAL.dataParam(data);

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        alert("评论成功!");
                       // window.history.go(-1);
                    }else{
                        this.GLOBAL.center_error(this,temp);
                    }
                })
            },
            /*上传图片*/
            getFile(event) {
                let num  = this.item_img.length;
                if(num > 3){
                    alert('最多上传4张图片');return false;
                }

                this.file = event.target.files[0];

                let form = {"image":this.file,"source":this.source}
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=image';
                let Data = this.GLOBAL.formParam(form);

                this.$ajax.post(url, Data).then((res) => {
                    if(res.data.code == 200){
                       
                        this.item_img.push(res.data.data);
                    }else{
                        alert(res.data.msg);
                    }
                }).catch((err) => {
                    console.log(err);
                })
            },

            /*返回按钮*/
            getIntegral:function(){
                window.history.go(-1);
            },
			arr_rand:function(key,num){
				let arr = [];
				for(var i=1;i<=num;i++){
					if(i <= key){
						arr.push(1);
					}else{ 
						arr.push(0);
					}
				}
				return arr;
			},
            /*星星点赞*/
			down:function(key,mode){
				key ++;
				
				var num = 5;
				var arr = this.arr_rand(key,num);
				
				if(mode == 1){
					this.one   = key;	
					this.data.arr_1 = arr;	
				}
				if(mode == 2){
					this.two = key;	
					this.data.arr_2 = arr;
				}
			},
			down_goods:function(key,mode,type){
				key ++;
				
				var num = 5;
				var arr = this.arr_rand(key,num);
				
				for(var i in this.goods_items){
					if(i == mode){
						if(type == 1){
							this.goods_items[i]['taste_arr'] = arr;
							this.goods_items[i]['taste_rank'] = key;
						}
						if(type == 2){
							this.goods_items[i]['facade_arr'] = arr;
							this.goods_items[i]['facade_rank'] = key;
						}
					}
				}
			},

        }
    }
</script>
<style>
    .km{
       
    }
    .km_one{
       /* border-color:#fd79ce;*/
        color:#fd79ce
    }
    .km_two{
        color:#c3c3c3;
        font-size:27px;
    }

    .kp_one{
        border-color:#fd79ce;
    }
    .kp_two{
       border-color:#c3c3c3
    }

    .wan_q{
        width:100%;
        min-height:0.78rem;
    }
    .wan_q .integral_4:nth-last-of-type{
        margin-bottom: 0.38rem;
    }
    /*点赞的好评还是差评字段*/
    .img_p{
        width:2.83rem;
        line-height:0.5rem;
        height:0.5rem;
        color:#979797;
        font-size:0.2rem;
        position:absolute;
        left:2rem;
        top:0.7rem;
    }
    /*添加图片的样式*/
    .showimg_1{
        position: relative;
        width:1.11rem;
        height: 1.09rem;
        display:block;
    }
    .showimg_1 .files {
        position: absolute;
        font-family: Arial;
        width: 1.3rem;
        height: 1.3rem;
        cursor: pointer;
        background-color: #999999;
        opacity: 0;
        z-index: 3;
        top: 0px;
    }
    .Release_4_5 li:last-of-type img:nth-of-type(1){
        border:0;
    }
    .Release_4_5 li img:nth-of-type(1){
        display:block;
        height:1.29rem;
        width:1.29rem;
      /*  border:0.01rem solid red;*/

    }
    .Release_4_5 li img:nth-of-type(2){
        display:block;
        height:0.24rem;
        width:0.24rem;
        position:absolute;
        top:0.1rem;
        right:0.1rem;
    }
    .Release_4_5 li{
        list-style:none;
        height:1.3rem;
        width:1.3rem;
        border-radius:0.05rem;
        margin-right:0.1rem;
        margin-bottom:0.1rem;
        position:relative;
    }
    .Release_4_5{
        min-height:2.56rem;
        width:5.74rem;
        padding-top:0.2rem;
        display:flex;
        padding-left:0.26rem;
        flex-wrap:wrap;
        margin-bottom:0.4rem;
    }
    /*上传图片*/
    .idea_ti{
        width:5.9rem;
        height:0.74rem;
        line-height:0.74rem;
        text-align:center;
        color:#ffffff;
        background:#2eaffc;
        font-size:0.36rem;
        border-radius:0.05rem;
        margin:0 auto;
        margin-bottom:0.4rem;
    }
    .idea_center span{
        position:absolute;
        color:#bcbcbc;
        font-size:0.24rem;
        left:5rem;
        top:2rem;
    }
    .idea_t{
        width:5.9rem;
        height:2.42rem;
        border:0;
        outline:none;
        background:#f3f3f3;
        line-height:0.28rem;
    }
    .idea_center{
        width:5.9rem;
        height:2.06rem;
        margin:0.22rem 0.28rem;
        position:relative;

    }
    .idea_text{
        width:100%;
        height:auto;
        margin-bottom:0.4rem;
    }

    .integral_4_span1{
        line-height:0.02rem;

        display:block;
        height:0.44rem;
        width:0.78rem;
      /*  border:0.01rem solid #c3c3c3;*/
        border-radius:0.5rem;
        position:absolute;
        right:0.18rem;
        text-align:center;
        top:0.18rem;
    }
    .integral_4_span{
        display:block;
        text-align:center;
        line-height:0.01rem;
        height:0.44rem;
        width:0.78rem;

       /* border:0.01rem solid #fd79ce;*/
        border-radius:0.5rem;
        position:absolute;
        right:1.12rem;
        top:0.18rem;
    }
    .integral_4_p{
        width:4.2rem;
        height:0.78rem;
        line-height:0.78rem;
        color:#434142;
        font-size: 0.3rem;
        padding-left:0.2rem;
    }
    .integral_4{
        width:100%;
        height:0.78rem;
        border-bottom:0.01rem solid #f0f0f0;
        position:relative;
    }
    .integral_k{
        width:100%;
        height:2.05rem;
        position:relative;
    }
    .integral_xian{
        width:4.83rem;
        height:0.02rem;
        background:#f0f0f0;
        position:absolute;
        top:2.05rem;
        left:0.8rem;
    }
     .integral_2 i{
         font-size: 22px;
         margin:0 0.1rem;
     }
     .integral_2 .red{
         color:red;
     }
    .integral_2 .ccc{
        color:#ccc;
    }
    .integral_2{
        width:3.2rem;
        height:1rem;
       /* background:red;*/
        position:absolute;
        line-height:0;
        top:1.08rem;
        left:1.6rem;
    }
    /*2*/
    .integral_1_p{
        height:0.01rem;
        width:3.2rem;
        background:#d7d7d7;
        position:absolute;
        top:0.54rem;
        left:1.62rem;
    }
    .integral_p{
        width:1.76rem;
        height:1.08rem;
        color:#434142;
        background:#ffffff;
        font-size:0.3rem;
        line-height:1.08rem;
        text-align:center;
        left:2.3rem;
        z-index: 1;
        position:absolute;
    }
    /*pp*/
    .integral_1{
        width:100%;
        height:4.43rem;
        border-bottom:0.1rem solid #f5f4f2;
       /* position:relative;*/
    }
    /*1*/
    .integral_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#2eaffc;
        font-size:0.28rem;
    }
    .integral_top img{
        display:block;
        position:absolute;
        height:0.36rem;
        width:0.36rem;
        left:0.27rem;
        top:0.25rem;
    }
    .integral_top{
        width:100%;
        height:0.79rem;
       /* border-bottom:1px solid #f0f0f0;*/
        border-bottom:0.1rem solid #f5f4f2;
        position:relative;
    }
</style>